<template>
 <div class="Goods">
     <van-button class="button" icon="revoke" type="primary" @click="$router.go(-1)"></van-button>
     <header>
        <van-swipe :autoplay="3000">
            <van-swipe-item v-for="item in obj" :key="item.id" >
                <img v-lazy="item.picUrl" class="pic"/>
            </van-swipe-item>
        </van-swipe>
     </header>
     <section>
         <div class="section-div">
             <van-card num="2" price="2.00" desc="描述信息" title="obj.title"/>
         </div>
     </section>
     <footer>
          <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
            <van-goods-action-icon icon="cart-o" text="购物车" />
            <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
            <van-goods-action-button type="warning" text="加入购物车" @click="showOne=true"/>
            <van-goods-action-button type="danger" text="立即购买" @click="showTwo=true"/>
          </van-goods-action>
          <van-action-sheet v-model="showOne" title="">
              <div class="content">
                <van-card num="2" price="2.00" desc="描述信息" title="商品标题" thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"/>
                <van-button class="content-con" type="warning">加入购物车</van-button>
              </div>
            </van-action-sheet>
            <van-action-sheet v-model="showTwo" title="">
              <div class="content">
                <van-card num="2" price="2.00" desc="描述信息" title="商品标题" thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"/>
                <van-button class="content-con" type="danger">立即购买</van-button>
              </div>
            </van-action-sheet>
     </footer>
 </div>
</template>

<script>
import Vue from "vue";
import { Lazyload } from "vant";
Vue.use(Lazyload);
export default {
  name: "",
  data() {
    return {
      obj: [],
      showOne: false,
      showTwo: false
    };
  },
  async mounted() {
    var id = this.$route.query.id;
    let { data: res } = await this.$http.get(
      "https://api.it120.cc/small4/banner/list"
    );
    console.log(res);
    this.obj = res.data;
  },
  methods: {
    getList(){
      
    }
  },
  computed: {},
  watch: {}
};
</script>

<style scoped>
.content {
  box-sizing: border-box;
  width: 100%;
  height: 300px;
  padding: 16px 16px;
  position: relative;
}
.content-con {
  position: absolute;
  bottom: 10px;
  right: 20px;
}
.Goods {
  height: 100%;
  overflow: hidden;
}
.button {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
.pic {
  width: 375px;
  height: 375px;
}
.section-div {
  width: 100%;
  height: 100px;
}
.section-div > p {
  color: white;
}
.section-div > p:first {
  color: black;
}
</style>